
import React from 'react'
import { View, Text, StyleSheet, InteractionManager } from 'react-native'
import store from 'react-native-simple-store';
import { getJson } from '../../utils/JsonUtil';
import NavCell from '../../components/NavCell';
import colors from '../../config/colors'
import LoadingSpinnerOverlay from '../../components/LoadingSpinnerOverlay';
import * as types from '../../constants/ActionTypes';
import Divider from '../../components/divider/Divider';
import {
  REASSIGN_SETTING,
  RELEASE_SETTING,
  DEFAULT_SETTING
} from '../../constants/VueRoutes';

class MyTeamSetting extends React.Component {
  constructor(props) {
    super(props);

    this.isNavToTeam = false;
    this.onPress = this.onPress.bind(this);
    this.onMemberCellPress = this.onMemberCellPress.bind(this);
    this.navigateToLink = this.navigateToLink.bind(this);
  };

  componentDidMount () {
    
    const { userActions } = this.props;
    InteractionManager.runAfterInteractions(() => {
    });
  }

  componentWillReceiveProps(nextProps) {
    if (this.isNavToTeam && nextProps.team.type === types.RECEIVE_TEAM_DETAIL && nextProps.team.team) {
      const { team } = nextProps.team;
      const { navigate } = this.props.navigation;
      this._modalLoadingSpinnerOverLay.hide()
      navigate('TeamProfile', { team });
    }
  };

  componentWillUnmount () {
    this.isNavToTeam = false;
  };

  onPress = (route) => {
    const { navigate } = this.props.navigation;
    navigate(route.name, route.args);
  };

  async go (link) {
    try {
      const { navigate } = this.props.navigation;
      const { params } = this.props.navigation.state;
      const url = await link(params.id);
      navigate('scrm', {
        article: {
          url: url,
          title: '',
        }
      });
    } catch(err) {
      console.log(err, 'err')
    }
  }

  navigateToLink (route) {
    this.go(route)
  };

  onMemberCellPress = (route) => {
    requestAnimationFrame(() => {
      const { args } = route;
      const { teamActions } = this.props;
      store.get('token').then(token => {
        teamActions.requestTeamDetail(token, args.id);
      })
      this.isNavToTeam = true;
      this._modalLoadingSpinnerOverLay.show()
    });
  };

  render () {
    const { params } = this.props.navigation.state;
    return (
      <View style={styles.containerStyle}>
        <Divider />
        <NavCell 
          title="成员管理"
          route={{name:'TeamProfile',  args: params}}
          onPressHandler={this.onMemberCellPress}
        />
        <Divider />
        <NavCell 
          title="客户分配设置"
          route={REASSIGN_SETTING}
          onPressHandler={this.navigateToLink}
        />
        <Divider />
        <NavCell 
          title="默认地址设置"
          route={DEFAULT_SETTING}
          onPressHandler={this.navigateToLink}
        />
        <Divider />
        <LoadingSpinnerOverlay ref={ component => this._modalLoadingSpinnerOverLay = component }/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  containerStyle: {
    marginTop: 20,
    backgroundColor: colors.grey9,
    flex: 1
  },
  emptyViewStyle: {
    flexDirection: 'row'
  },
  emptyViewTextStyle: {
    flex: 1,
    marginTop: 100,
    textAlign: 'center',
    color: colors.grey6,
    fontSize: 16
  }
})

export default MyTeamSetting;